<template>
  <l-layout class="l-tab-page" :left="300">
    <template #left>
      <l-panel :title="$t('公司信息')" style="padding-right:0;">
        <el-tree
          :data="companyTree"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleCompanyClick"

          v-if="showTree"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="fa fa-sitemap"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-select-panel
      style="padding:8px;padding-left:0;"
      ref="selectPanel"
      v-model="value"
      :columns="columns"
      :isTree="true"
      :isPage="false"
      :loadSelectTable="loadSelectTable"
      model="client"
      idKey="f_DepartmentId"
      pidKey="f_ParentId"
      valueKey="f_DepartmentId"
      labelKey="f_FullName"
    >
    </l-select-panel>
  </l-layout>
</template>

<script>
export default {
  name: "l-department-select-panel",
  data() {
    return {
      value: "",
      departments: [],
      columns: [
        { label: "名称", prop: "f_FullName", minWidth: "150" },
        { label: "公司", prop: "f_CompanyId", minWidth: "150",dataType:'company' },
        { label: "编码", prop: "f_EnCode", width: "100" },
      ],
      showTree:true
    };
  },
  computed: {
    companyTree() {
      if (this.lr_companyTree) {
        return this.lr_companyTree;
      } else {
        return [];
      }
    },
    departmentApi(){
      return window.$api.organization.department;
    }
  },
  created() {
    this.lr_loadCompanys && this.lr_loadCompanys();
  },
  methods: {
    handleCompanyClick(node) {
      this.$refs.selectPanel.filter({f_CompanyId:node.f_CompanyId});
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable() {
      if(this.departments.length == 0){
        this.departments =  await this.$awaitWraper(this.departmentApi.getList("all"));
      }
      return this.$deepClone(this.departments);
    },
    loadData(){
      this.tableLoadData();
    },
    resetForm() {
      this.showTree = false;
      this.$refs.selectPanel.reset();
      this.$nextTick(()=>{
        this.showTree = true;
      });
    },
    getForm() {
      let value = this.value;
      return this.departments.filter(t=>value.indexOf(t.f_DepartmentId) != -1);
    },
  },
};
</script>
